<template>
  <div class="row m-auto">
    <div class="outer col-4 m-1 d-flex justify-content-center align-items-center" @click="div2Handler">
      正常
      <div class="inner col-4 m-1 d-flex justify-content-center align-items-center" @click="div1Handler">
        <el-button class=" col-4 m-1 d-flex justify-content-center align-items-center" @click="btnHandler">
          点击
        </el-button>
      </div>
    </div>

    <div class="outer col-4 m-1 d-flex justify-content-center align-items-center" @click="div2Handler">
      使用 .stop 阻止冒泡
      <div class="inner col-4 m-1 d-flex justify-content-center align-items-center" @click.stop="div1Handler">
        <el-button class=" col-4 m-1 d-flex justify-content-center align-items-center" @click="btnHandler">
          点击
        </el-button>
      </div>
    </div>

    <div class="outer col-4 m-1 d-flex justify-content-center align-items-center" @click="div2Handler">
      使用 .self 只有点击self才执行; 内部不执行
      <div class="inner col-4 m-1 d-flex justify-content-center align-items-center" @click.self="div1Handler">
        <el-button class=" col-4 m-1 d-flex justify-content-center align-items-center" @click="btnHandler">
          点击
        </el-button>
      </div>
    </div>

    <div class="outer col-4 m-1 d-flex justify-content-center align-items-center" @click="div2Handler">
      使用 .capture 实现捕获触发机制
      <div class="inner col-4 m-1 d-flex justify-content-center align-items-center" @click.capture="div1Handler">
        <el-button class=" col-4 m-1 d-flex justify-content-center align-items-center" @click="btnHandler">
          点击
        </el-button>
      </div>
    </div>

    <!-- 使用 .once 只触发一次事件处理函数 -->
    <!-- 即按照下面的例子，第一次低级不跳转，第二次才跳转 -->
    <a href="https://baidu.com" @click.prevent.once="linkClick">百度一下</a>

    <!--  使用 .provent 阻止默认行为 -->
    <a href="https://baidu.com" @click.prevent="linkClick">百度一下</a>
    <!-- 结合使用修饰符 -->
    <a href="https://baidu.com" @click.prevent.stop="linkClick">百度一下</a>
  </div>
</template>

<script>
export default {
  name: "test_event",
  methods: {
    div1Handler() {
      this.$message.success('触发了inner div的点击事件');
    },
    div2Handler() {
      this.$message.success('触发了outer div的点击事件');
    },
    btnHandler() {
      this.$message.success('触发了bt按钮的点击事件');
    },
    linkClick() {
      this.$message.success('触发了链接');
    }
  }
}
</script>
<style type="text/css" scoped>
.inner {
  height: 9.3rem;
  background-color: gray;
}

.outer {
  padding: 40px;
  background: #a3a3e3;
}
</style>